<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字" v-model="a">
  <input type="text" placeholder="请输入数字" v-model="b">
  <button @click="calc('+')">加</button>
  <button @click="calc('-')">减</button>
  <button @click="calc('*')">乘</button>
  <button @click="calc('/')">除</button>
  <h3>运算结果为：{{result}}</h3>
</template>

<script setup>
import {ref} from "vue";

const a = ref('');
const b = ref('');
const result = ref('');

const calc = (o)=>{
  //首先采用正则表达式的方式判断输入数字的合法性
  if(!/^\d+$/.test(a.value) || !/^\d+$/.test(b.value)){
    alert("请输入数字");
    return;
  }
  result.value = eval(a.value + o + b.value);
}
</script>


<style scoped>

</style>